<template>
  <custom-modal
    ref="createModal"
    v-if="visible"
    :width="width"
    :visible="visible"
    :title="$t('releaseNote')"
    :destroyOnClose="true"
    :attrs="{ dialogClass: 'appUpdateDetailDialog' }"
    :bodyStyle="{height}"
    @cancel="handleCancel"
  >
    <template #title>
      <span>{{ $t('applicationDetail') }}</span>
      <i class="iconfont icon-liebiaoshitu1 switchLayout" @click="changeShowMode"></i>
    </template>
    <template #footer>
      <a-button type="primary" @click.stop="() => { visible = false }">{{ $t('back') }}</a-button>
    </template>
    <div
      class="appUpdateDetailContWrap"
      :style="{ height: '100%',padding: compName === 'TableShow' ? '20px 24px' : ''}">
      <component
        :is="compName"
        :query="query"
        :app-lists="appLists"
        :loading-base-info="loadingBaseInfoData"
        :time="time"
        ref="appUpdateComp"
      ></component>
    </div>
  </custom-modal>
</template>
<script>
import DialogCont from './index.vue'
import RichShow from './richShow.vue'
import TableShow from './tableShow.vue'
import taskApi from '@/api/modules/task'
import CustomModal from '@/components/CustomModal/index.vue'
export default {
  components: {
    DialogCont,
    RichShow,
    TableShow,
    CustomModal
  },
  props: {
    width: {
      type: String,
      default: '50%'
    },
    height: {
      type: String,
      default: 'auto'
    },
    // 查询条件
    query: {
      type: Object,
      default () {
        return null
      }
    }
  },
  data () {
    return {
      visible: false,
      submitDisabled: true,
      compName: 'RichShow',
      appLists: [],
      loadingBaseInfoData: false,
      time: 158742
    }
  },
  watch: {
    query: {
      handler (val) {
        if (!val) {
          this.appLists = []
          return
        }
        this.getEcuBaseInfoData()
      },
      immediate: true
    }
  },
  methods: {
    handleCancel () {
      this.visible = false
      this.$refs.appUpdateComp.resetPageData()
    },
    switchVisible (val) {
      this.visible = val
    },
    changeShowMode () {
      this.compName = this.compName === 'RichShow' ? 'TableShow' : 'RichShow'
    },
    // 获取当前任务下的所有零件信息,不包括N次升级信息
    getEcuBaseInfoData () {
      this.loadingBaseInfoData = true
      this.appLists = []
      taskApi.getTaskVehicleAppList(this.query).then(res => {
        this.appLists = res.data
        this.time = Date.now()
      }).finally(() => {
        this.loadingBaseInfoData = false
      })
    }
  }
}
</script>
<style lang="less" scoped>
.appUpdateDetailDialog {
  min-height: 600px;
  .switchLayout {
    margin-left: 10px;
    cursor: pointer;
  }
  .appUpdateDetailContWrap {
    overflow: auto;
  }
}
</style>
<style lang="less">
.appUpdateDetailDialog {
  .ant-modal-body {
    padding:0;
  }
}
</style>
